import { Dropdown, Icon, Layout, Menu } from 'antd';
import { connect } from 'dva';
import { Link } from 'dva/router';
import React, { PureComponent } from 'react';
import styles from './index.less';

const Header = ({ username }) => {
  const menu = (
    <Menu className={styles.menu}>
      <Menu.Item>
        <Icon type="user" />个人中心
      </Menu.Item>
      <Menu.Item>
        <Icon type="setting" />设置
      </Menu.Item>
      <Menu.Divider />
      <Menu.Item>
        <Icon type="logout" />退出登录
      </Menu.Item>
    </Menu>
  );

  return (
    <Layout.Header className={styles.header}>
      <Link to="/" className={styles.headerBrand}>EnBug</Link>
      <div className={styles.headerRight}>
        <Dropdown overlay={menu}>
          <span className={`${styles.action} ${styles.account}`}>{username}</span>
        </Dropdown>
      </div>
    </Layout.Header>
  );
};

const mapStateToProps = ({ global }) => ({
  username: global.username
});

export default connect(mapStateToProps)(Header);
